<template>
    <el-dialog
    title="添加班级"
    :visible.sync="addClassData.dialogState"
    size="small"
    class="dialog-box11">
        <el-form v-loading='loading' class="form-content" :model="dataForm" :rules="rules" ref="dataForm" label-width="80px"  label-position='right'>
            <el-row :gutter="21" class="school-item" v-if="this.schoolType == '0'">
                <el-col :span="24">
                    <el-form-item label="年级" prop="grade" :rules="rules.schoolName">
                        <el-select v-if="roleType == '2' || roleType == '1'" v-model="dataForm.grade" :clearable="roleType == '2' || roleType == '1'" placeholder="请选择" style="width:100%;" @change="getClassListFu( dataForm.grade )" v-autoResize>
                            <el-option v-for="item in gradeList" :key="item.pId" :label="item.sName" :value="item.pId">
                            </el-option>
                        </el-select>
                        <el-select v-if="roleType == '5'" v-model="dataForm.grade" placeholder="请选择" style="width:100%;" @change="getClassListFu1( dataForm.grade )" v-autoResize>
                            <el-option v-for="item in gradeList" :key="item.gradeId" :label="item.gradeName" :value="item.gradeId">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="21" class="school-item">
                <el-col :span="24">
                    <el-form-item label="班级名称" prop="classId" :rules="rules.schoolName">
                        <el-select v-if="roleType == '2' || roleType == '1'" v-model="dataForm.classId" :clearable="roleType == '2' || roleType == '1'" placeholder="请选择" style="width:100%;" v-autoResize>
                            <el-option v-for="item in classList" :key="item.classId" :label="item.classNickName" :value="item.classId">
                            </el-option>
                        </el-select>
                        <el-select v-if="roleType == '5'" v-model="dataForm.classId" placeholder="请选择" style="width:100%;" v-autoResize>
                            <el-option v-for="item in classList" :key="item.classId" :label="item.className" :value="item.classId">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>

        <div slot="footer" class="dialog-footer">
            <el-button @click="resetForm('dataForm')"> 取 消 </el-button>
            <el-button type="primary" @click="submitForm('dataForm')"> 确 定 </el-button>
        </div>
    </el-dialog>
</template>

<script>
    import { getUserInfoDetail, getGradeInfoByUserIdAndSchoolId, getClassInfoList, getLoginRoleInfo, getGradeList, getClassList, insertClassInfo, querySchoolByName, getGrade, getClass } from 'api/studentMange';
    import { mapGetters } from 'vuex';
    export default {
        props: {
            addClassData: {
                default() {
                    return {
                        dialogState: false,
                        studentId: ''
                    }
                },
                required: true
            }
        },
        data() {
            return {
                loading: false,
                userId: '',
                roleState: '',
                schoolLoading: false,
                gradeList: [],
                classList: [],
                dataForm: {
                    schoolId: '',
                    grade: '',
                    classId: ''
                },
                rules: {
                    schoolName: [
                        { required: true, message: '内容不能为空', trigger: 'change' }
                    ]
                }
            }
        },
        computed: {
            ...mapGetters([
                'uid',
                'schoolId',
                'schoolName',
                'schoolList',
                'schoolType',
                'roleType'
            ])
        },
        created() {
            this.getUserInfoDetailFu();
        },
        methods: {
            submitForm(dataForm) {
                this.$refs[dataForm].validate((valid) => {
                    if (valid) {
                        this.loading = true;
                    
                        let userId = this.uid; // 用户ID
                        let studentId = this.addClassData.studentId;
                        let schoolId = this.schoolId; // 所属学校id
                        let schoolName = this.schoolName; // 所属学校名称
                        let grade = this.dataForm.grade; //  年级
                        let classId = this.dataForm.classId; // 班级编号

                        insertClassInfo(userId, studentId, schoolId, schoolName, grade, classId).then(response => {
                            this.loading = false;
                            if (response.data.status == 200) {
                                this.$message.success(response.data.errorMsg);
                                this.addClassData.dialogState = false;
                                this.$emit('search');

                                this.dataForm.schoolId = '';
                                this.dataForm.grade = '';
                                this.dataForm.classId = '';
                            } else {
                                this.$message.error(response.data.errorMsg);
                            }
                            this.$refs[dataForm].resetFields();
                        }).catch(() => {
                            this.loading = false;
                        });
                    }
                })
            },
            resetForm(dataForm) {
                this.addClassData.dialogState = false;
                this.$refs[dataForm].resetFields();
            },
            getUserInfoDetailFu() {
                getUserInfoDetail().then( res => {
                    if (res.data.status == 200) {
                        this.roleState = res.data.content[0].userType;

                        // 2代表学校管理员  5代表班主任
                        if (this.roleType == '5' ) { // 5 班主任 6 // 学校管理员
                            this.userId = res.data.content[0].userId;
                            this.getGradeListFu1(this.schoolId);
                        } else {
                            this.getGradeListFu(this.schoolId);
                        }
                    } else {
                        this.$message.error(res.data.errorMsg);
                    }
                })
            },
            getGradeListFu(schoolId) {
                this.gradeList = [];
                this.dataForm.grade = '';

                if(this.schoolType == '1') {
                    this.classList = [];
                    this.dataForm.classId = '';  
                    if(this.schoolId) {
                        getClassList(null, this.schoolId).then( res => {
                            this.classList = res.data.content;
                        })
                    }
                } else {
                    if(this.schoolId) {
                        getGradeList(schoolId).then( res => {
                            this.gradeList = res.data.content;
                        })
                    }
                }
                
            },
            getClassListFu(gradeId) {
                this.classList = [];
                this.dataForm.classId = '';  
                
                if(this.dataForm.grade) {
                    getClassList(gradeId, this.schoolId).then( res => {
                        this.classList = res.data.content;
                    })
                }
            },
            getGradeListFu1(schoolId) {
                this.dataForm.grade = '';
                let userId = this.userId;
                if(this.schoolType == '1') {
                    this.dataForm.classId = '';  
                    getClassInfoList(userId,  null, this.schoolId).then( res => {
                        this.classList = res.data.content;
                    })
                } else {
                    getGradeInfoByUserIdAndSchoolId(userId, schoolId).then( res => {

                        this.gradeList = res.data.content;
                        for (var i = 0;i<this.gradeList.length;i++) {  
                            for (var j = i+1;j<this.gradeList.length;j++) {  
                                if(this.gradeList[i].gradeId == this.gradeList[j].gradeId){  
                                    this.gradeList.splice(j,1);  
                                    j--;  
                                }  
                            }  
                        }
                    })
                }
            },
            getClassListFu1(gradeId) {
                this.dataForm.classId = '';  
                let userId = this.userId;
                getClassInfoList(userId,  gradeId, this.schoolId).then( res => {
                    this.classList = res.data.content;
                })
            }
        }
    }

</script>

<style lang="scss">
    .dialog-box11{
        .el-dialog__header{
            text-align:center;
            background:#f7f7f9;
            height:54px;
            .el-dialog__title{
                font-size:20px;
                color:#333;
            }
        }
        .el-dialog{
            width:600px;
        }
        .form-content{
            width: 80%;
            margin: 0 auto; 
        }
        .dialog-footer{
            width: 80%;
            margin: 0 auto; 
            text-align:center;
        }
    }
</style>